<template>
  <div>
    <Search></Search>
    <Row class="my-wrap">
      <Col span="4" class="my-left">
        <div class="avatar-wrap">
          <Avatar size="80" :src="userInfo.headimgurl" shape="circle" icon="logo-octocat"></Avatar>
          <p class="username">{{ userInfo.user_name }}</p>
        </div>
        <Menu
          :theme="theme"
          :active-name="menuName"
          width="180px"
          @on-select="onSelct">
          <MenuGroup>
            <MenuItem
              v-for="(item, i) in menuList"
              :key="`mItem-${i}`"
              :name="`${item.type}`">
              {{ $t(item.name) }}
            </MenuItem>
          </MenuGroup>
        </Menu>
      </Col>
      <Col span="20" class="my-right">
        <component :is="componentType"></component>
      </Col>
    </Row>
  </div>
</template>

<script>
  import { Search } from "@/components";
  import { mapState } from 'vuex'
  export default {
    name: 'My',
    data() {
      return {
        theme: "light",
        menuName: "MyAccount",
        menuList: [
          {
            name: "我的账户",
            type: "MyAccount",
            componentType: "MyAccount",
            method: "",
          },
          {
            name: "我的订单",
            type: "MyOrder",
            componentType: "MyOrder",
            method: "",
          },
          // {
          //   name: "退款/售后",
          //   type: "accountManage",
          //   componentType: "AfterSale",
          //   method: "AfterSale",
          // },
          {
            name: "当前余额",
            type: "Balance",
            componentType: "Balance",
            method: "",
          },
          // {
          //   name: "当前积分",
          //   type: "accountManage",
          //   componentType: "Integral",
          //   method: "Balance",
          // },
          // {
          //   name: "收藏夹",
          //   type: "accountManage",
          //   componentType: "Collect",
          //   method: "Collect",
          // },
          {
            name: "收货地址管理",
            type: "AddressManager",
            componentType: "AddressManager",
            method: "AddressManager",
          },
          {
            name: "我的优惠券",
            type: "Coupon",
            componentType: "Coupon",
            method: "",
          },
          {
            name: "我要开店",
            type: "ApplyShop",
            componentType: "ApplyShop",
            method: "",
          },
          {
            name: "申请供货商",
            type: "ApplySupplier",
            componentType: "ApplySupplier",
            method: "",
          },
          // {
          //   name: "入驻记录",
          //   type: "accountManage",
          //   componentType: "",
          //   method: "",
          // },
        ]
      }
    },
    computed: {
      ...mapState(['userInfo']),
      componentType () {
        return this.menuList.filter(v => v.type === this.menuName)[0].componentType
      }
    },

    created () {
      if (this.$store.state.token) {
        this.$store.dispatch('getUserInfo')
      }
    },

    watch: {
      $route: {
        handler (v) {
          this.menuName = v.query.name
        },
        deep: true,
        immediate: true
      }
    },

    components: {
      Search,
      MyOrder: () => import("./order/MyOrder.vue"),
      MyAccount: () => import("./MyAccount.vue"),
      AfterSale: () => import("./AfterSale.vue"),
      Balance: () => import("./Balance.vue"),
      Integral: () => import("./Integral.vue"),
      Collect: () => import("./Collect.vue"),
      Coupon: () => import("./Coupon.vue"),
      ApplyShop: () => import("./ApplyShop.vue"),
      ApplySupplier: () => import("./ApplySupplier.vue"),
      AddressManager: () => import("./AddressManager.vue"),
    },

    methods: {
      onSelct(name) {
        this.$router.push(`/my?name=${name}`)
        this.menuName = name;
      }
    }
  }
</script>


<style lang="scss" scoped>
.my-wrap {
  width: 1190px;
  margin: 10px auto;
  display: flex;
}
.my-right {
  background-color: #fff;
  padding: 20px;
}
.avatar-wrap {
  background-color: #fff;
  padding: 20px;
  width: 180px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 0 10px;
  .username {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
  }
}
/deep/ .ivu-menu-item-group-title {
  display: none;
}

.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
</style>
